<script setup>
import { reactive, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router';
import {
  getActivityInfoByIdApi,
  getPreheatActivityListApi, getWebsiteActivityExpertListApi,
  getWebsiteActivityScheduleListApi
} from "../../service/applyaudit/applyaudit";
const route = useRoute();

let activityInfo = ref({})
let guestItemList = ref([
])

let timeLineList = ref([
  {
    id: 1,
    activitiesList: [
    ],
  },
  {
    id: 2,
    activitiesList: [
    ],
  }
])
let activityImg = ref([
  { id: 1, url: '/src/assets/img/activityItemImg.png' },
  { id: 2, url: '/src/assets/img/activityItemImg.png' },
  { id: 3, url: '/src/assets/img/activityItemImg.png' },
])

function getActivityInfoById(activityId) {
  getActivityInfoByIdApi(activityId).then((resp) => {
    if (resp.data.code === 0) {
      activityInfo.value = resp.data.result;
    } else {

    }
  });
}

function getWebsiteActivityScheduleList(activityId) {
  getWebsiteActivityScheduleListApi(activityId).then((resp) => {
    if (resp.data.code === 0) {
      let result = resp.data.result;
      for (let i = 0; i < result.length; i++) {
        let scheduleInfo = {
          id: result[i].scheduleId,
          content: 'Event start',
          timestamp: result[i].scheduleBeginTime.split(' ')[1].substring(0, 5) + '-' + result[i].scheduleEndTime.split(' ')[1].substring(0, 5),
          name: result[i].scheduleName,
          context: result[i].scheduleBrief,
        }
        if (i % 2 == 0) {
          timeLineList.value[0].activitiesList.push(scheduleInfo);
        } else {
          timeLineList.value[1].activitiesList.push(scheduleInfo);
        }
      }
      console.log(timeLineList.value);
    } else {

    }
  });
}


function getWebsiteActivityExpertList(activityId) {
  getWebsiteActivityExpertListApi(activityId).then((resp) => {
    if (resp.data.code === 0) {
      guestItemList.value = resp.data.result;
    } else {

    }
  });
}



onMounted(() => {
  getActivityInfoById(route.query.activityId);
  getWebsiteActivityExpertList(route.query.activityId);
  getWebsiteActivityScheduleList(route.query.activityId);
})
</script>

<template>
  <div>

    <div class="detailImg">
      <div class="title">{{ activityInfo.activityName }}</div>
      <div class="enTitle">{{ activityInfo.activityBrief }}</div>
      <div class="activityTime">
        <div>活动时间：{{ activityInfo.activityBeginTime + '~' + activityInfo.activityEndTime }}</div>
        <div>活动地址：{{ activityInfo.activityAddress }}</div>
      </div>
      <div class="introduction">
        <div>
          {{ activityInfo.functionAttendance + '人' }} <br> <span class="mechanism">活动人数</span>
        </div>
        <div>{{ activityInfo.mechanisms + '家' }} <br> <span class="mechanism">相关机构</span> </div>
        <div>{{ guestItemList.length?guestItemList.length:activityInfo.experts + '位' }} <br> <span class="mechanism">评审评委/嘉宾</span> </div>
      </div>
    </div>
    <div class="box" >
      <div class="guest-box" v-if="guestItemList.length">
        <ActivityTitle :title="'参会嘉宾'" />
        <div class="guestItems">
          <template v-for="(item, index) in guestItemList" :key='item.expertId'>
            <div class="guestItem">
              <div class="img">
                <img :src="item.expertPortrait" alt="">
              </div>
              <div class="name">{{ item.expertName }}</div>
              <div class="position">{{ item.expertTitle }}</div>
              <div style="width: 20px;height: 4px;background: #1891FF;margin: 15px 0;"></div>
              <div class="introduce">{{ item.expertBrief }}</div>
            </div>
          </template>
        </div>
      </div>

      <div class="Hdschedule" v-if="timeLineList[0].activitiesList.length">
        <ActivityTitle class="scheduletitle" :title="'活动日程'" />
        <div class="schedule">
          <template v-for="(timeItme, index) in timeLineList" :key="timeItme.id">
            <div class="timeline">
              <el-timeline>
                <el-timeline-item v-for="(activity, index) in timeItme.activitiesList" :key="index"
                  :timestamp="activity.timestamp" placement="top" type="primary">
                  <div>
                    <span class="name">{{ activity.name }}</span>
                    <span class="position">{{ activity.position }}</span>
                  </div>

                  <el-card class="card">
                    {{ activity.context }}
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </template>
        </div>
      </div>
      <div class="activity-box">
        <ActivityTitle :title="'活动详细'" />
        <div>
          <div class="activityText" v-html="activityInfo.activityDesc">

          </div>
          <!--          <div class="activityImg">
            <template v-for="(item, index) in activityImg" :key="item.id">
              <div class="activityItemImg">
                <img :src="item.url" alt="">
              </div>
            </template>
          </div>-->
        </div>
      </div>

      <div class="Registration-box">
        <ActivityTitle :title="'报名通道'" />
        <div class="RegistrationItems">
          <div class="RegistrationItem">
            <div class="border">
              <div class="imgIcon"><img src="/src/assets/img/activitytelIcon.png" alt=""></div>
              <div class="title">联系电话</div>
              <div class="tel">{{ activityInfo.registrationTelephone }}</div>
              <div class="workTime">工作日：8:00 - 20：00</div>
            </div>
          </div>
          <div class="RegistrationItem">
            <div class="border">
              <div class="imgIcon">
                <img src="/src/assets/img/wechatIcon.png" alt="">
              </div>
              <div class="title">微信号</div>
              <div class="tel">{{ activityInfo.registrationWechat }}</div>
            </div>

          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<style lang="less" scoped>
.detailImg {

  height: 480px;
  background: url('@/assets/img/activitybackImg.png') #1891FF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .title {
    font-size: 48px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;

  }

  .enTitle {
    font-size: 20px;
    font-family: FZLTXHJW;
    font-weight: normal;
    color: #FFFFFF;
    margin-top: 24px;
    letter-spacing: 3px;
    text-transform: uppercase;
  }

  .activityTime {
    width: 460px;
    height: 84px;
    background: rgba(0, 0, 0, 0);
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    text-align: left;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 18px 30px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 32px;
    margin: 36px 0;
  }

  .introduction {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    :nth-child(2) {
      border: 1px solid #fff;
      border-top: none;
      border-bottom: none;
    }



    div {
      padding: 0 60px;
      height: 60px;
      text-align: center;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 30px;

      .mechanism {

        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 30px;
        border: none;
      }
    }


  }


}

.box {
  // width: 1500px;
  margin: 48px auto 0;

  .guest-box {
    width: 1500px;
    margin: 0 auto;

    .guestItems {
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;

      margin: 45px -30px 0;

      .guestItem {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;
        padding: 30px;

        .img {
          width: 200px;
          height: 200px;


          border-radius: 50%;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .name {
          margin: 24px 0 12px;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #1891FF;
        }

        .position {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #545454;

        }

        .introduce {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #787878;
          line-height: 30px;
          overflow: hidden; //超出隐藏
          text-overflow: ellipsis; //超出使用省略号
          display: -webkit-box;
          -webkit-line-clamp: 3; //第几行
          -webkit-box-orient: vertical;
        }
      }
    }
  }


  .Hdschedule {
    background: #F7F9FA;
    padding: 47px 0;

    .scheduletitle {
      width: 1500px;
      margin: 0 auto;
    }

    .schedule {
      width: 1500px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 46% 46%;
      margin-top: 45px;
      columns: 2;
      column-gap: 100px;

      .timeline {
        :deep(.el-timeline-item__timestamp.is-top) {
          position: absolute;
          margin: 0;
          left: -117px;
          top: -3px;
          color: #333333;
          width: 102px;
          height: 30px;
          background: #1891FF;
          border-radius: 5px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          text-align: center;
          line-height: 25px;
        }

        :deep(.el-timeline) {
          padding-left: 118px;
        }

        .name {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #333333;
        }

        .position {

          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #787878;
          margin-left: 12px;
        }

        .card {
          margin-top: 15px;
          background-color: #EDF1F5;
        }
      }

    }
  }

  .activity-box {
    width: 1500px;
    margin: 47px auto 0;

    .activityText {
      margin-top: 23px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #787878;
      line-height: 30px;
    }

    .activityImg {
      display: grid;
      grid-template-columns: 460px 460px 460px;
      grid-gap: 60px;
      height: 300px;
      margin-top: 25px;
      margin-bottom: 46px;

      .activityItemImg {


        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }



  .Registration-box {
    width: 1500px;
    margin: 0 auto;

    .RegistrationItems {
      display: grid;
      grid-template-columns: 720px 720px;
      grid-gap: 60px;
      margin-top: 25px;

      .RegistrationItem {
        width: 720px;
        height: 360px;
        background: #F5F6F7;
        display: flex;
        align-items: center;
        justify-content: center;

        .border {
          display: flex;
          align-items: center;
          justify-content: center;

          flex-direction: column;
          width: 620px;
          height: 280px;
          background: rgba(242, 245, 247, 0);
          border: 1px solid #1891FF;
          border-radius: 30px;

          .imgIcon {
            width: 72px;
            height: 72px;
            // background: #1891FF;
            // opacity: 0.1;
            border-radius: 50%;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .title {
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
            margin: 15px 0 32px;
          }

          .tel {
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-style: italic;
            color: #1891FF;
          }

          .workTime {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #787878;
            margin-top: 15px;
          }
        }
      }
    }
  }

}
</style>
